<template>

	<view>
		<view class="prod-col">
			<view class="col-item" @tap="myCollectionHandle">
				<view v-if="loginResult" class="num">{{jinqi}}</view>
				<view v-else class="num">--</view>
				<view class="tit">近期收益</view>
			</view>
			<view class="col-item" @tap="toBeReflected">
				<view v-if="loginResult" class="num">{{daiti}}</view>
				<view v-else class="num">--</view>
				<view class="tit">待体现</view>
			</view>
			<view class="col-item" @tap="cumulativeGain">
				<view v-if="loginResult" class="num">{{leiji}}</view>
				<view v-else class="num">--</view>
				<view class="tit">累计收益</view>
			</view>
		</view>

		<view v-if="wifiList.length">
			<view class="search">
				<uni-easyinput suffixIcon="search" v-model="keyword" placeholder="请输入WiFi名称查询"
					@iconClick="getWifiList"></uni-easyinput>
			</view>

			<view v-for="wifi in wifiList" :key="wifi.id" class="item">
				<view class="content">
					<view class="left">
						<view class="provider">

							{{
							wifi.storeName
						}}
						</view>
						<view class="wifi-name">
							<text>
								WiFi名称：
							</text>
							<text>{{
							wifi.wifiName
						}}</text>
						</view>
						<!-- 只有用户自己创建的wifi才显示当前创建了多少次，否则不显示 -->
						<view class="connect-count">
							累计连接<text>
								{{
									wifi.contConnect
								}}
							</text>次
						</view>
						<view class="connect-count">
							昨日连接<text>
								{{
								wifi.contConnectYesterday
								}}
							</text>次
						</view>
					</view>
					<view class="right">
						<image :src="wifi.wifiUrl" mode="aspectFit" style="width:100%;height:250rpx;" :lazy-load="true">
						</image>
					</view>
				</view>
				<!-- 消费者不能删除和管理wifi这几个按钮隐藏 -->
				<view class="btn-tool">
					<button type="primary" size="mini" @click="upadtewifi(wifi)" plain="true">修改</button>
					<button type="default" size="mini" class="not-first" @click="wifiurl(wifi)"
						plain="true">查看二维码</button>
					<button type="warn" size="mini" class="not-first" @click="deleteWifi(wifi.id)"
						plain="true">删除</button>
				</view>



			</view>
		</view>
		<view v-else class="no-data">
			<view>
				<uni-icons custom-prefix="iconfont" type="icon-zanwushuju" size="48" color="#999999"></uni-icons>
			</view>
			<view class="text">
				暂无数据
			</view>
		</view>
	</view>
</template>
<script>
	var http = require("../../utils/http.js");
	var util = require("../../utils/util.js");
	var config = require("../../utils/config.js");

	export default {
		data() {
			return {
				wifiList: [],
				keyword: "",
				jinqi: 0,
				daiti: 0,
				leiji: 0,
				loginResult: '',
			}
		},
		onLoad: function() {
			var that = this
			var params = {
				url: "/p/wificonnect/getUserScore",
				method: "GET",
				data: {},
				callBack: function(res) {
					that.daiti = res.daiti
					that.jinqi = res.jinqi
					that.leiji = res.leiji
					console.log(that.$data)
				}
			};
			http.request(params);
		},
		onShow: function() {
			if (!uni.getStorageSync('userId')) {
				console.log("http.mpLogin()")
				http.mpLogin()
			}
			//加载订单数字
			var ths = this; // var status = ths.data.status

			ths.setData({
				loginResult: uni.getStorageSync("loginResult"),
				// isAuthInfo: Boolean(wx.getStorageSync('loginResult').userId),
			});
			uni.showLoading({
				title: '加载中'
			});
			var params = {
				url: "/p/wifi/list",
				method: "GET",
				data: {
					page: 0,
					limit: 100,
					userId: uni.getStorageSync("userId")
				},
				callBack: res => {
					uni.hideLoading();
					this.setData({
						wifiList: res.list,
					});
					// console.log(res)
				}

			};
			http.request(params);
		},
		methods: {
			myCollectionHandle: function() {
				
				uni.showToast({
					title:"每月十五号统一进入待体现",
					icon: "none"
				})
				
				// var url = '/subPackpages/prod-classify/prod-classify?sts=5';
				// var id = 0;
				// var title = "我的收藏商品";
			
				// if (id) {
				// 	url += "&tagid=" + id + "&title=" + title;
				// }
			
				// uni.navigateTo({
				// 	url: url
				// });
			},
			
			toBeReflected: function() {
				uni.showModal({
					title: '确认提现',
					content: '微信审核后打款,注意查收！',
					success: function (res) {
						if (res.confirm) {
							console.log('去后台提现');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			
			cumulativeGain: function() {
				console.log("累计收益")
			},
			upadtewifi: function(wifi) {
				// 挑传页面传递参数
				const params = encodeURIComponent(JSON.stringify(wifi));
				uni.navigateTo({
					url: "/subPackpages/createWifi/createWifi?params=" + params
				})
				// console.log(wifi)
			},
			wifiurl: function(wifi) {
				const params = encodeURIComponent(JSON.stringify(wifi));
				uni.navigateTo({
					url: "/subPackpages/wifiSetting/wifiSetting?params=" + params
				})
				// console.log(wifi)
			},
			deleteWifi: function(id) {
				var that = this
				uni.showModal({
					title: '提示',
					content: '你确定要删除吗',
					success: function(res) {
						if (res.confirm) {
							var params = {
								url: "/p/wifi/delete",
								method: "GET",
								data: {
									id: id,
									userId: uni.getStorageSync("userId")
								},
								callBack: res => {
									var params = {
										url: "/p/wifi/list",
										method: "GET",
										data: {
											page: 0,
											limit: 100,
											userId: uni.getStorageSync("userId")
										},
										callBack: res => {
											// console.log(res)
											that.setData({
												wifiList: res.list,
											});

										}

									};
									http.request(params);
								}

							};
							http.request(params);


						} else if (res.cancel) {
							console.log('取消');
						}
					}
				});

			},
			getWifiList: function() {
				var that = this;

				var params = {
					url: "/p/wifi/list",
					method: "GET",
					data: {
						page: 0,
						limit: 100,
						userId: uni.getStorageSync("userId"),
						wifiname: that.keyword,
					},
					callBack: res => {
						this.setData({
							wifiList: res.list,
						});
						console.log(this.wifiList)
					}

				};
				http.request(params);
			}


		}

	}
</script>
<style>
	@import "./wifi-list.css";
</style>

<style lang="scss">
	.item {
		background-color: #ffffff;
		border-radius: 20rpx;
		margin: 50rpx 32rpx;
		padding: 25rpx 25rpx;
		height: 300rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
	}

	.content {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		flex: 1;
		width: 100%;
	}

	.left {
		flex: 1;
	}

	.right {
		height: 250rpx;
		width: 40%;
	}

	.provider {
		font-size: 36rpx;
	}

	.wifi-name {
		color: #999999;
		font-size: 32rpx;
		margin-top: 16rpx;
	}

	.connect-count {
		margin-top: 0px;
		color: #666666;

		text {
			font-style: italic;
			color: $uni-color-primary;
			padding: 0 8px;
			font-weight: bold;
			font-size: 36rpx;
		}
	}

	.btn-tool {
		height: 50rpx;

		button.not-first {
			margin-left: 28rpx;
		}
	}

	.no-data {
		flex-direction: column;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 48rpx;
	}

	.text {
		margin-top: 10px;
		color: #666666;
	}

	.search {
		margin: 50rpx 32rpx;
	}
</style>